<template>
  <div class="user-container">
    <div class="form-container">
      <el-form
        ref="userForm"
        :model="userForm"
        status-icon
        label-width="80px"
        :inline="true"
      >
        <el-form-item label="用户名称" class="item" style="font-weight: 700">
          <el-input
            v-model="userForm.username"
            placeholder="请输入用户名称"
            prefix-icon="el-icon-search"
            clearable
            size="mini"
          >
          </el-input>
        </el-form-item>
        <el-form-item label="手机号码" class="item" style="font-weight: 700">
          <el-input
            v-model="userForm.phone"
            placeholder="请输入手机号码"
            prefix-icon="el-icon-message"
            clearable
            size="mini"
          >
          </el-input>
        </el-form-item>
        <el-form-item label="状态" class="item" style="font-weight: 700">
          <el-select
            v-model="userForm.status"
            placeholder="用户状态"
            size="mini"
            clearable
          >
            <el-option label="正常" value="1"></el-option>
            <el-option label="停用" value="0"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item
          label="创建时间"
          class="item"
          style="font-weight: 700; display: inline"
        >
          <el-date-picker
            v-model="time"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            value-format="”yyyy-MM-dd”"
            size="mini"
          >
          </el-date-picker>
        </el-form-item>

        <el-form-item>
          <el-button
            type="primary"
            @click="onSubmit"
            size="mini"
            class="el-icon-search"
            >查询</el-button
          >
          <el-button
            type="warning"
            @click="resetForm('userForm')"
            size="mini"
            class="el-icon-refresh"
            >重置</el-button
          >
          <el-button
            type="primary"
            size="mini"
            class="el-icon-plus"
            @click="dialogFormVisible = true"
            >新增</el-button
          >
        </el-form-item>
      </el-form>
    </div>
    <!-- 表格 -->
    <div class="table-container">
      <el-table
        :data="tableData"
        style="width: 100%"
        :header-cell-style="{ background: '#eef1f6', color: '#606266' }"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="55"></el-table-column>
        <el-table-column prop="id" label="用户编号" width="80" align="center">
        </el-table-column>
        <el-table-column
          prop="username"
          label="用户名称"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="nickname"
          label="用户昵称"
          align="center"
        ></el-table-column>
        <el-table-column prop="phone" label="手机号" width="180" align="center">
        </el-table-column>
        <!-- <el-table-column prop="status" label="状态" align="center">
          <template slot-scope="scope">
            <el-switch v-model="scope.row.status"> </el-switch>
          </template>
        </el-table-column> -->
        <el-table-column
          prop="createTime"
          label="创建时间"
          width="180"
          align="center"
        >
        </el-table-column>
        <el-table-column label="操作" align="center">
          <template slot-scope="scope">
            <el-button
              type="text"
              class="el-icon-edit"
              @click="handleEdit(scope.row)"
              >修改</el-button
            >
            <el-button
              type="text"
              class="el-icon-delete"
              @click="handleDelete(scope.row)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 分页 -->
    <div class="block">
      <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pageNum"
        :page-sizes="[1, 5, 10, 15]"
        :page-size="pageSize"
        layout="->,total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </div>

    <!-- 弹出表单 -->

    <el-dialog title="用户信息" :visible.sync="dialogFormVisible" width="30%">
      <el-form :model="addForm" size="mini">
        <el-form-item
          label="用户名称"
          :label-width="formLabelWidth"
          class="item"
        >
          <el-input v-model="addForm.name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item
          label="用户昵称"
          :label-width="formLabelWidth"
          class="item"
        >
          <el-input v-model="addForm.nickName" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="手机号" :label-width="formLabelWidth" class="item">
          <el-input v-model="addForm.phone" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item label="生日" :label-width="formLabelWidth" class="item">
          <el-date-picker
            v-model="addForm.birthday"
            type="date"
            placeholder="选择日期"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="描述" :label-width="formLabelWidth" class="item">
          <el-input
            v-model="addForm.description"
            type="textarea"
            autocomplete="off"
          ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer">
        <el-button @click="dialogFormVisible = false" size="mini"
          >取 消</el-button
        >
        <el-button type="primary" @click="dialogFormVisible = false" size="mini"
          >确 定</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [],
      userForm: {
        username: "",
        phone: "", //手机号码
        status: 1, //用户状态 1正常 0停用
      },
      time: "", //选择的时间
      startTime: "", //开始时间
      endTime: "",
      multipleSelection: [], //多选的数量
      dialogFormVisible: false, //弹窗默认不可见
      addForm: {
        //弹出表单信息
        name: "",
        nickName: "",
        phone: "",
        description: "",
        birthday: "",
      },
      formLabelWidth: "80px",
      pageNum: 1, //当前页
      pageSize: 10, //每页多少条
      total: 0, //总记录数
    };
  },
  methods: {
    //获取分页数据
    load() {
      this.$axios
        .get("/user/page", {
          params: {
            pageNum: this.pageNum,
            pageSize: this.pageSize,
          },
        })
        .then((res) => {
          this.tableData = res.data.records;
          this.total = res.data.total;
        });
    },
    //查询按钮
    onSubmit() {
      console.log("submit!");
      console.log(this.time);
    },
    //重置
    resetForm(userForm) {
      // this.$refs["userForm"].resetFields();
      this.userForm.username = "";
      this.userForm.phone = "";
      this.userForm.status = "";
      this.time = "";
    },
    //触发多选事件
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    //修改当前行数据表格数据
    handleEdit(row) {
      this.addForm = row;
      this.dialogFormVisible = true;
    },
    //删除当前行数据
    handleDelete(row) {
      this.$confirm("此操作将永久删除该条信息，是否继续", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$message({
            type: "success",
            message: "删除成功！",
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "取消删除！",
          });
        });
    },
    handleSizeChange(pageSize) {
      this.pageSize = pageSize;
      this.load();
    },
    handleCurrentChange(pageNum) {
      this.pageNum = pageNum;
      this.load();
    },
  },
  created() {
    this.load();
  },
};
</script>

<style scoped>
body {
  height: 100%;
  font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB,
    Microsoft YaHei, Arial, sans-serif;
}

.el-form {
  margin: 0 0;
}

.el-form-item__label .item {
  font-size: 14px;
  color: #606266;
}
.el-pagination {
  margin: 30px;
  text-align: center;
}
</style>